<template>
  <div>
    <el-row type="flex" class="container">
      <div class="content">
        <div class="header">后台登录</div>
        <div class="content_by">
          <div class="text">
            <span class="key">账号</span>
            <input
              @input="validationName"
              v-model="form.username"
              type="text"
            />
            <div v-if="!isInputName" class="el-icon-check">账号可以登陆</div>
            <div v-else class="el-icon-close">
              账号只能为3-12位的数字,英文字母组成
            </div>
          </div>
          <div class="text">
            <span class="key">密码</span>
            <input
              @input="validationPwd"
              v-model="form.password"
              type="password"
            />
            <div v-if="!isInputPwd" class="el-icon-check">密码合格</div>
            <div v-else class="el-icon-close">
              密码只能为3-12位的数字,英文字母组成
            </div>
          </div>
          <div class="btnLogin">
            <div class="checkout">
              <input type="checkbox" checked /> 两周内自动登录
            </div>
            <button class="login" @click="login">登录</button>
            <button class="reset" @click="reset">重置</button>
          </div>
          <div class="register">
            <a href="javascript:void(0)" @click="register">
              还没有账号? 去注册</a
            >
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rule: /^\w{3,12}$/,
      isInputName: true,
      isInputPwd: true,
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    validationName() {
      if (this.rule.test(this.form.username)) {
        this.isInputName = false;
      } else {
        this.isInputName = true;
      }
    },
    validationPwd() {
      if (this.rule.test(this.form.password)) {
        this.isInputPwd = false;
      } else {
        this.isInputPwd = true;
      }
    },
    reset() {
      this.form = {
        username: "",
        password: "",
      };
      this.validationName();
      this.validationPwd();
    },
    login() {
      if (this.form.username && this.form.password) {
        this.$axios({
          method: "post",
          url: "/login",
          data: {
            username: this.form.username,
            password: this.form.password,
          },
        }).then((res) => {
          console.log(res.data);
          if (res.data.message === "登录成功") {
            this.$message({
              message: res.data.message,
              type: "success",
            });
            localStorage.setItem("adminToken", res.data.data.token);
            this.$router.replace("/");
          } else {
            this.$message({
              message: res.data.message,
              type: "warning",
            });
          }
        });
      } else {
        this.$message({
          message: "输入框不能为空",
          type: "warning",
        });
      }
    },
    register() {
      this.$message.error("系统繁忙,请稍后再试!");
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  padding-left: 380px;
  background: url(https://images1.jyimg.com/w4/login/v2/i/nv_1.jpg) no-repeat
    #efefef;
  .content {
    width: 500px;
    height: 400px;
    background-color: #fff;
    margin-top: 100px;
    border: 1px solid #ccc;
    .header {
      font-weight: 700;
      height: 50px;
      line-height: 50px;
      padding-left: 50px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }

    .content_by {
      padding-left: 50px;
      .text {
        font-size: 16px;
        margin-bottom: 20px;
        .key {
          display: inline-block;
          width: 50px;
          height: 30px;
          line-height: 30px;
          vertical-align: middle;
        }
        input {
          width: 280px;
          height: 30px;
          outline: none;
        }
        .el-icon-close {
          display: block;
          font-size: 12px;
          color: red;
          margin-top: 10px;
          margin-left: 50px;
        }
        .el-icon-check {
          display: block;
          font-size: 12px;
          color: #0a0;
          margin-top: 10px;
          margin-left: 50px;
        }
      }
      .btnLogin {
        margin-right: 50px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
        .checkout {
          font-size: 16px;
          color: #888;
          margin-bottom: 30px;
          margin-left: 50px;
        }
        .login {
          width: 120px;
          height: 40px;
          margin-left: 50px;
          font-weight: 700;
          color: #fff;
          border: none;
          background-color: #ff546a;
          border-radius: 8px;
          outline: none;
          cursor: pointer;
        }
        .reset {
          width: 80px;
          height: 30px;
          vertical-align: bottom;
          margin-left: 30px;
          border: none;
          border-radius: 8px;
          outline: none;
          cursor: pointer;
        }
      }
      .register {
        text-align: center;
        height: 40px;
        line-height: 40px;
        a {
          color: #888;
          font-size: 16px;
          margin-right: 40px;
        }
      }
    }
  }
}
</style>